<template>
  <Drawer :visible="visible" width="48rem" @close="emits('update:visible', false)">
    <template #title>文章评论( {{ count ?? '-' }} )</template>
    <template #footer>
      <Row justify="space-between" align="bottom">
        <Button size="small" type="dashed" @click="emits('refresh')">
          <template #icon>
            <ReloadOutlined />
          </template>
          刷新评论
        </Button>
        <Button size="small" type="primary" @click="emits('manage')">
          <template #icon>
            <EditOutlined />
          </template>
          管理评论
        </Button>
      </Row>
    </template>
    <Spin :spinning="loading">
      <template v-if="count">
        <CommentTreeList :comments="comments" />
      </template>
      <template v-else>
        <Empty description="无数据" />
      </template>
    </Spin>
  </Drawer>
</template>

<script setup lang="ts">
import { Drawer, Spin, Row, Empty, Button } from 'ant-design-vue'
import { ReloadOutlined, EditOutlined } from '@ant-design/icons-vue'
import CommentTreeList from './CommentTreeList.vue'
import type { CommentTree } from '@/store/comment'

defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  count: {
    type: Number,
    default: 0,
  },
  comments: {
    type: Array<CommentTree>,
  },
})

const emits = defineEmits(['refresh', 'manage', 'update:visible'])
</script>
